<template>
  <!-- 收货地址 -->
  <van-contact-card type="edit" :name="`${address.consignee} ${address.region_text} ${address.address}`" v-if="address" :tel="address.mobile" :editable="false" />

  <!-- 商品卡片 -->
  <van-card
    v-for="(item,key) in product"
    :title="item.products.name"
    :thumb="item.products.thumb_text"
    num="2"
  >
    <template #title>
      <div class="title">{{ item.products.name }}</div>
    </template>

    <!-- 卡片的插槽部分 -->
    <template #desc v-if="item.attrs">
      <van-tag v-for="(item,index) in item.attrs" :key="index" class="tag" type="danger">{{ item.value }}</van-tag>
    </template>
    <template #desc v-else>
      <van-tag class="tag" type="danger">无规格数据</van-tag>
    </template>

    <template #tags>
      <div class="price">单价：￥{{item.products.price}}</div>
    </template>

    <template #price>
      <div class="price">合计：￥{{ item.total }}</div>
    </template>
  </van-card>

  <!-- 订单信息 -->
  <van-cell title="订单号" :value="orderinfo.code" />
  <van-cell title="订单总价" :value="`￥${orderinfo.amount}`" />
  <van-cell title="支付方式" :value="orderinfo.pay_text" />
  <van-cell title="订单状态" :value="orderinfo.status_text" />
  <van-cell title="优惠金额" :value="`￥${orderinfo.coupon_amount}`" />
  <van-cell title="下单时间" :value="orderinfo.createtime_text" />
  <van-cell title="订单描述" :value="orderinfo.remark" />

  <!-- 操作按钮组 -->
  <div class="actions">
    <van-button square hairline type="primary" size="large">在线客服</van-button>
    <van-button square hairline type="danger" size="large">申请退款</van-button>
  </div>
</template>

<script setup>

import { onMounted } from 'vue';

    const {proxy} = getCurrentInstance()

    //接收传过来的数据
    let orderid = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0
    let product = ref({})
    let address = ref(null)
    let orderinfo = ref({})

    onMounted(async () => {
        //监听后退事件
        window.addEventListener('popstate', Back)
        OrderInfo()
    })

    const Back = () =>
    {
        window.removeEventListener('popstate',Back)
        proxy.$router.push('/order')
    }

    //获取订单信息
    const OrderInfo = async () => {
        var params = {
            orderid,
            busid:proxy.$business.value.id,
        }

        var result = await proxy.$POST({
            url:'/order/info',
            params,
        })

        // console.log(result)
        // return false
        if(result.code==0)
        {
            proxy.$fail(result.msg)
            return false
        }
    
        address.value = result.data.address
        orderinfo.value = result.data.orderinfo

        //转化为对象 转化里面的attrs数据
        if(result.data.product)
        {
            result.data.product.map(item => item.attrs = JSON.parse(item.attrs))
        }
        product.value = result.data.product
        // console.log(result.data.product)

    }

</script>
<style scoped>
  @import url('/assets/css/OrderInfo.css');
</style>